<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            text-align: center;
        }
        table{
            margin :auto;
            margin-top: 5%;
            border: 1px black solid;
        }
        th{
            background-color: darkgray;
            height: 30px;
            padding: 0px 20px 0px 20px;
        }
        td{
            background-color: #f0f0f0;
            height: 30px;
            padding: 0px 20px 0px 20px;
            size: 10px;
        }
    </style>
    <script src="/js/jquery-3.3.1.js"></script>
</head>
<body>
    <h1 th:text="${msg}">欢迎您</h1>
    <a th:text="${size}"></a>
    <table>
        <tr>
            <th>Id</th>
            <th>MD5</th>
            <th>name</th>
            <th>Size</th>
            <th>Data</th>
            <th>删除</th>
        </tr>
        <tr th:each="file:${fileup}">
            <td th:text="${file.fileid}"></td>
            <td th:text="${file.md5}"></td>
            <td th:text="${file.filePath}"></td>
            <td th:text="${file.size}"></td>
            <td th:text="${file.CreateTime}"></td>
            <td>
            <input type="button" value="删除" style="background-color: red;" onclick="del()" th:onclick="del([[${file.fileid}]])"></td>
        </tr>

    </table>
</body>
<script>
    function del(e) {
        $.ajax({
            type:"GET",//请求方式为get或者post
            url:"/del",//请求的url(一般为后台接口)
            data:{"id":e},//发送到服务器的参数
            dataType:"json",//服务器响应的数据类型
            success:function(data) { //请求成功后返回的数据，赋值给变量'data'
                //对data进行操作 
                if (data.delid){
                    alert(data.delid);
                    location.reload();
                }
            }
        });
    }
</script>
</html>